<template>
    <div>
        <div class="dynamicServiceBox">
            <div class="dynamicServiceTitleBox flexEndBetween">
                <div class="flexCenter mb-4 cursor-pointer" @click="showModal()">
                    <div class="text-size-20 mr-8">巡逻评价</div>
                    <img :src="require('../../assets/img/dutyMonitoring/patrolEvaluationDownLink.png')">
                </div>
                <div class="mb-18">
                    <switchTimeTab @jchange="switchTimeTabChange"></switchTimeTab>
                </div>
            </div>


            <div class="px-10">

                <div class="flexEndBetween">
                    <div>高风险路段时空占比</div>
                    <div class=" text-f69037"><span
                            class="digitalFont text-size-28 line-height-08 d-inline-block mr-6">{{dataXunluoPingJia.highRiskSectionRate|rateFormat}}</span><span
                            class="line-height-08 d-inline-block">%</span></div>
                </div>
                <div style="border:1px solid #278ad4" class="mb-8">
                    <div style="border:1px solid #0c345d" class="d-flex">
                        <!--498/8~63-->
                        <div class="d-flex" style="flex-shrink: 0">
                            <div v-for="(d,i) in getGradientColorArray(dataXunluoPingJia.highRiskSectionRate,60)"
                                 :key="i"
                                 style="height:12px;width:6px;margin-right:2px;"
                                 :style="{backgroundColor: d}"></div>
                        </div>
                        <div style="width:100%;flex-shrink: 1;height:12px" class="gradientBox1"></div>
                    </div>
                </div>


                <div class="flexEndBetween">
                    <div>高风险路段巡逻覆盖率</div>
                    <div class=" text-f69037"><span
                            class="digitalFont text-size-28 line-height-08 d-inline-block mr-6">{{dataXunluoPingJia.highRiskPatrolCoverageRate|rateFormat}}</span><span
                            class="line-height-08 d-inline-block">%</span></div>
                </div>
                <div style="border:1px solid #278ad4" class="mb-8">
                    <div style="border:1px solid #0c345d" class="d-flex">
                        <!--498/8~63-->
                        <div class="d-flex" style="flex-shrink: 0">
                            <div v-for="(d,i) in getGradientColorArray(dataXunluoPingJia.highRiskPatrolCoverageRate,60)"
                                 :key="i"
                                 style="height:12px;width:6px;margin-right:2px;"
                                 :style="{backgroundColor: d}"></div>
                        </div>
                        <div style="width:100%;flex-shrink: 1;height:12px" class="gradientBox1"></div>
                    </div>
                </div>


                <div class="flexEndBetween">
                    <div>高风险路段巡逻时长占比</div>
                    <div class=" text-f69037"><span
                            class="digitalFont text-size-28 line-height-08 d-inline-block mr-6">{{dataXunluoPingJia.highRiskTimeRate|rateFormat}}</span><span
                            class="line-height-08 d-inline-block">%</span></div>
                </div>
                <div style="border:1px solid #278ad4" class="mb-8">
                    <div style="border:1px solid #0c345d;" class="d-flex">
                        <!--498/8~63-->
                        <div class="d-flex" style="flex-shrink: 0">
                            <div v-for="(d,i) in getGradientColorArray(dataXunluoPingJia.highRiskTimeRate,60)"
                                 :key="i"
                                 style="height:12px;width:6px;margin-right:2px;"
                                 :style="{backgroundColor: d}"></div>
                        </div>
                        <div style="width:100%;flex-shrink: 1;height:12px" class="gradientBox1"></div>
                    </div>
                </div>


            </div>


            <div class="dynamicServiceTitleBox flexEndBetween mt-20">
                <div class="text-size-20 mb-4">交通执法评价</div>
            </div>

            <div class="flexBetween mt-6">
                <div style="width:253px" class="p-10">
                    <div class="d-inline-block border-bottom-light-theme mb-8">
                        重点违法行为占比及排名
                    </div>
                    <div class="position-relative">
                        <div id="patrolEvaluationPieBox1"></div>
                        <div class="absoluteFull flexCenterCenter">
                            <div class="text-center flexCenterCenter"
                                 style="width:60px;height:60px;border-radius: 100%; border:2px solid #92eaff">
                                <div class="text-fab96d">
                                    <span class="text-size-24 font-weight-bold">{{dataEnforcementEvaluate.breakLawRate|rateFormat}}</span>
                                    <span>%</span>
                                </div>

                            </div>
                        </div>
                    </div>


                    <div class="mt-8">
                        <div class="flexCenterBetween mb-4" v-for="(item,i) in dataEnforcementEvaluate.top5IllegalAct" :key="i">
                            <div class="flexCenter">
                                <img :src="require('../../assets/img/dutyMonitoring/'+(i+1)+'.png')" class="mr-8">
                                <a-tooltip :title="item.name">
                                    <div class="legalName">{{item.name}}</div>
                                </a-tooltip>
                            </div>
                            <div class="font-weight-bold text-fab96d">{{item.num}}
                            </div>
                        </div>
                    </div>

                </div>
                <div class="gradientLine2px" style="height:254px;"></div>
                <div style="width:253px" class="p-10">
                    <div class="d-inline-block border-bottom-light-theme mb-8">
                        高风险路段执法
                    </div>

                    <div class="position-relative">
                        <div id="patrolEvaluationPieBox2"></div>
                        <div class="absoluteFull flexCenterCenter">
                            <div class="text-center flexCenterCenter"
                                 style="width:60px;height:60px;border-radius: 100%; border:2px solid #92eaff">
                                <div class="text-f69037">
                                    <span class="text-size-24 font-weight-bold">{{dataEnforcementEvaluate.highRiskRate|rateFormat}}</span>
                                    <span>%</span>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="mt-8">
                        <div class="flexCenterBetween mb-4" v-for="(item,i) in dataEnforcementEvaluate.top5highRisk" :key="i">
                            <div class="flexCenter">
                                <img :src="require('../../assets/img/dutyMonitoring/'+(i+1)+'.png')" class="mr-8">

                                    <div class="legalName">{{item.name}}</div>

                            </div>
                            <div class="font-weight-bold text-f69037">{{item.num}}
                            </div>
                        </div>
                    </div>


                </div>

            </div>

            <div class="dynamicServiceTitleBox flexEndBetween">
                <div class="text-size-20 mb-4">事故处置评价</div>
            </div>


            <div class="flexCenter mt-10 ml-20">
                <img :src="require('../../assets/img/dutyMonitoring/iconAccidentsNO.png')" class="mr-8">
                <div class="mr-10">总数</div>
                <div class="text-size-40 text-39fef8 digitalFont mr-10 line-height-08">
                    {{dataPatrolEvaluation.accidentTotal}}
                </div>
                <div class="mr-6">年同比</div>
                <img v-if="dataPatrolEvaluation.previousYearTotalRate>=0"
                     :src="require('../../assets/img/dutyMonitoring/iconUp.png')" class="mr-4">
                <img v-else :src="require('../../assets/img/dutyMonitoring/iconDown.png')" class="mr-4">
                <div :class="{'text-04f186':!dataPatrolEvaluation.previousYearTotalRate<0,'text-f5303e':dataPatrolEvaluation.previousYearTotalRate>=0}">
                    {{dataPatrolEvaluation.previousYearTotalRate|rateFormat}}%
                </div>

            </div>

            <div class="flexBetween mt-6">
                <div style="width:253px" class="d-flex flex-column align-items-center">
                    <div class="flexCenter">
                        <img :src="require('../../assets/img/dutyMonitoring/iconTime.png')" class="mr-4">
                        <div>到达现场用时</div>
                    </div>
                    <div class="flexEnd my-6">
                        <div class="mr-6 text-39fef8 text-size-20 line-height-1">
                            {{dataPatrolEvaluation.arrivaltime}}
                        </div>
                        <div class="text-size-12">分</div>
                    </div>
                    <div class="flexCenter ">
                        <div class="mr-6">年同比</div>
                        <img v-if="dataPatrolEvaluation.previousYearArrivalRate>=0"
                             :src="require('../../assets/img/dutyMonitoring/iconUp.png')" class="mr-4">
                        <img v-else :src="require('../../assets/img/dutyMonitoring/iconDown.png')" class="mr-4">
                        <div :class="{'text-04f186':!dataPatrolEvaluation.previousYearArrivalRate<0,'text-f5303e':dataPatrolEvaluation.previousYearArrivalRate>=0}">
                            {{dataPatrolEvaluation.previousYearArrivalRate|rateFormat}}%
                        </div>
                    </div>


                </div>
                <div class="gradientLine2px" style="height:72px;"></div>
                <div style="width:253px" class="d-flex flex-column align-items-center">
                    <div class="flexCenter">
                        <img :src="require('../../assets/img/dutyMonitoring/iconAverageDuration.png')" class="mr-4">
                        <div>处置平均用时</div>
                    </div>
                    <div class="flexEnd my-6">
                        <div class="mr-6 text-39fef8 text-size-20 line-height-1">
                            {{dataPatrolEvaluation.excutetime}}
                        </div>
                        <div class="text-size-12">分</div>
                    </div>
                    <div class="flexCenter">
                        <div class="mr-6">年同比</div>
                        <img v-if="dataPatrolEvaluation.previousYearExcuteRate>=0"
                             :src="require('../../assets/img/dutyMonitoring/iconUp.png')" class="mr-4">
                        <img v-else :src="require('../../assets/img/dutyMonitoring/iconDown.png')" class="mr-4">
                        <div :class="{'text-04f186':!dataPatrolEvaluation.previousYearExcuteRate<0,'text-f5303e':dataPatrolEvaluation.previousYearExcuteRate>=0}">
                            {{dataPatrolEvaluation.previousYearExcuteRate|rateFormat}}%
                        </div>
                    </div>


                </div>

            </div>


        </div>



    </div>

</template>

<script>
    import {
        getEnforcementEvaluate,
        getPatrolEvaluation, getPatrolEvaluationList1, getPatrolEvaluationList2,
        getXunluoPingJia
    } from "../../common/api";
    import {echartsSimpePieFactory} from "../../common/echart-config/echart-config";
    import echarts from 'echarts'
    import {getLastMonthRange, getLastWeekRange} from "../../utils/js-utils";

    import SwitchTimeTab from "@/components/switch-time-tab.vue";
    import {gradientColorArray} from "../../utils/hex-to-decimal";
    import {rateFormat, sysDic} from "../../common/filters";



    export default {
        name: "expresswaySummary",
        components: {SwitchTimeTab},
        data() {
            return {
                range: [],
                dataXunluoPingJia: {},// 巡逻评价
                dataEnforcementEvaluate: {},// 交通执法评价
                dataPatrolEvaluation: {},// 事故处置评价


                echartsPatrolEvaluationPieChart1: null, //
                echartsPatrolEvaluationPieChart2: null, //
            }
        },
        filters:{sysDic,rateFormat},
        methods: {

            getXunluoPingJia() {// 巡逻评价
                var reqBoxy = {};
                reqBoxy.startTime = this.range[0];
                reqBoxy.endTime = this.range[1];
                getXunluoPingJia(reqBoxy).then(res => {
                    console.log(res)
                    if (res.isSuccess) {
                        this.dataXunluoPingJia = res.data;
                    }
                })
            },

            getEnforcementEvaluate() {// 交通执法评价
                var reqBoxy = {};
                reqBoxy.startTime = this.range[0];
                reqBoxy.endTime = this.range[1];
                getEnforcementEvaluate(reqBoxy).then(res => {
                    if (res.isSuccess) {
                        this.dataEnforcementEvaluate = res.data;

                        this.biuldPatrolEvaluationPieChart1();
                        this.biuldPatrolEvaluationPieChart2();
                    }
                })
            },
            getPatrolEvaluation() {// 事故处置评价
                var reqBoxy = {};
                reqBoxy.startTime = this.range[0];
                reqBoxy.endTime = this.range[1];
                getPatrolEvaluation(reqBoxy).then(res => {
                    if (res.isSuccess) {
                        this.dataPatrolEvaluation = res.data;
                    }
                })
            },
            biuldPatrolEvaluationPieChart1() {
                this.echartsPatrolEvaluationPieChart1 = echarts.init(document.getElementById('patrolEvaluationPieBox1'));
                this.echartsPatrolEvaluationPieChart1.setOption(echartsSimpePieFactory('#f7ad44', this.dataEnforcementEvaluate.breakLawRate*100));
            },
            biuldPatrolEvaluationPieChart2() {
                this.echartsPatrolEvaluationPieChart2 = echarts.init(document.getElementById('patrolEvaluationPieBox2'));
                this.echartsPatrolEvaluationPieChart2.setOption(echartsSimpePieFactory('#f4703f', this.dataEnforcementEvaluate.highRiskRate*100));
            },




            switchTimeTabChange(range) {
                // 巡逻评价
                // console.log(range);
                this.range = range;
                this.getXunluoPingJia()
                this.getEnforcementEvaluate()
                this.getPatrolEvaluation()
            },

            getGradientColorArray(presend, maxNub) {
                var step = Math.round(presend * maxNub);
                return gradientColorArray("#0d89e1", "#ef8935", step)
            },

            showModal() {
                this.$emit('showModal', this.range)
            }

        },
        mounted() {
            this.range = getLastWeekRange();


            this.getXunluoPingJia() //巡逻评价

            this.getEnforcementEvaluate() //交通执法评价
            this.getPatrolEvaluation() //事故处置评价


        }, beforeDestroy() {
            this.echartsPatrolEvaluationPieChart1.clear();
            this.echartsPatrolEvaluationPieChart2.clear();

        }
    }
</script>

<style scoped>

    .dynamicServiceBox {
        background-image: url("../../assets/img/dutyMonitoring/bgDynamicService.png");
        height: 744px;
        position: relative;
        padding: 54px 23px 20px 30px;
    }

    .dynamicServiceTitleBox {
        background-image: url("../../assets/img/dutyMonitoring/bgTitle.png");
        width: 496px;
        background-position: bottom;
        background-repeat: no-repeat;

    }

    #patrolEvaluationPieBox1, #patrolEvaluationPieBox2 {
        height: 70px;
        width: 70px;
        margin: 0 auto;
    }
    .legalName{
        width: 185px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


</style>
